<template>
    <Mask style="z-index: 999;">
        <Dialog 
            msg='确认清空购物车么？' 
            :is-show="showDialog" 
            @hide="showDialog = false" 
            @ok="okHandler"
            >
        </Dialog>
        <div class="cart-details">
            <div class="header">
                <h2>餐品详情</h2>
                <a @click="showDialog = true" href="javascript:;">
                    <i class="ri-delete-bin-line"></i>
                    清空购物车
                </a>
            </div>
            <Meals :meals="meals.cartMealS" :desc="false"></Meals>
        </div>
    </Mask>
</template>
<script lang="js" setup>
import { useMealsStore } from '@/stores/mealsStore';
import Meals from '../Meals/Meals.vue';
import Mask from '../UI/Mask.vue';
import Dialog from '../UI/Dialog.vue';
import { ref } from 'vue';
const meals = useMealsStore()
const showDialog = ref(false)
const emits = defineEmits()

const okHandler = () => {
    // 点击确认之后要干的事
    // 1.把购物车清空
    meals.clearCart()
    // 2.关闭CartDetails
    // showDialog.value=false
    // 3. 关闭对话框
    emits("hide")

}
</script>

<style lang="css" scoped>
.cart-details {
    background-color: #fff;
    position: absolute;
    bottom: 0;
    width: 750rem;
    border-top-left-radius: 40rem;
    border-top-right-radius: 40rem;
}

.meals {
    padding-top: 40rem;
    height: auto;
    max-height: calc(280rem *4);
}

.header {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    border-top-left-radius: 40rem;
    border-top-right-radius: 40rem;
    padding: 20rem 40rem;
}

.header h2 {
    font-size: 28rem;
}

.header a {
    color: #9f9f9f;
    font-size: 22rem;
    display: flex;
    align-items: center;
}

.header i {
    margin-right: 6rem;
    font-size: 26rem;
}

.mask {
    z-index: 999;
}
</style>